<!-- 1 script -->
<script setup lang="ts" name='MyRefSimpleDate'>
import { ref } from "vue";

//ts  stirng number boolean 
let counter = ref(1)

//定义复杂类型
let user = ref({
  name: '张三',
  age: 18
})



function increment() {
  //访问 ref定义的响应式数据  需要.value
  console.log("counter", counter);
  counter.value++;
}


function changeName() {
  console.log("user", user);
  user.value.name = "李四";
}


function changeAge() {
  user.value.age = 19;
}



</script>

<!-- 2 template   模板中  引用的响应式数据  不需要 .value -->
<template>
  <div>累计跳高的次数:{{ counter }}</div>
  <div>
    <button @click="increment">点我+1</button>
  </div>


  <div style="margin: 50px;border: solid 1px ridge;">
    <h1>复杂类型</h1>
    <div>
      user.name : {{ user.name }}
    </div>
    <div>
      user.age :{{ user.age }}
    </div>


    <div>
      <button @click="changeName">修改姓名</button>
    </div>
    <div>
      <button @click="changeAge">修改年龄</button>
    </div>
  </div>
</template>

<!-- 3 style -->

<style scoped></style>